<template>
  <el-card class="box-card">
    <breadcrumb :naviItems.sync="naviItems"></breadcrumb>
    <div class="container">
      <!-- 数据物理存储大小相关 -->
      <div class="data">
        <div class="card head">
          <div>上云数据</div>
          <div>{{ detailData.DataCount + '条' }}</div>
        </div>
        <div class="card node">
          <div class="sub-card title">使用登记数据</div>
          <div class="sub-card content">{{ detailData.RegInfoDataCount + '条' }}</div>
          <!-- <div class="sub-card content">{{ detailData.RegInfoDataSize + 'MB' }}</div> -->
        </div>
        <div class="card node">
          <div class="sub-card title">定检数据（定检报告）</div>
          <div class="sub-card content">{{ detailData.CheckInfoDataCount + '条' }}</div>
          <!-- <div class="sub-card content">{{ detailData.CheckInfoDataSize + 'MB' }}</div> -->
        </div>
        <div class="card node">
          <div class="sub-card title">充装数据</div>
          <div class="sub-card content">{{ detailData.RecordInfoDataCount + '条' }}</div>
          <!-- <div class="sub-card content">{{ detailData.RecordInfoDataSize + 'MB' }}</div> -->
        </div>
      </div>
      <!-- 气瓶数据相关 -->
      <div class="gas">
        <div class="card head">
          <div>入网气瓶</div>
          <div>{{ detailData.GasCount + '台' }}</div>
        </div>
        <div class="charts">
          <div id="geo-graph" style="width: 800px; height: 800px"></div>
          <div class="other-charts">
            <div class="chart gas-type">
              <div id="gas-type" style="min-width: 400px; height: 400px"></div>
            </div>
            <div class="chart gas-use-years">
              <div id="gas-use-years" style="width: 400px; height: 400px"></div>
            </div>
            <div class="chart gas-record">
               <div id="gas-record" style="width: 600px; height: 300px;margin-left:80px"></div>
            </div>
          </div>
        </div>
      </div>
      <!-- 单位相关 -->
      <div class="unit">
        <div class="card head">
          <div>服务单位</div>
          <div>{{ detailData.UnitCount + '家' }}</div>
        </div>
        <div class="card node">
          <div class="sub-card title">使用单位/充装单位</div>
          <div class="sub-card content">{{ detailData.SydwRecordUnitCount + '家' }}</div>
        </div>
        <div class="card node">
          <div class="sub-card title">制造单位</div>
          <div class="sub-card content">{{ detailData.MakeUnitCount + '家' }}</div>
        </div>
        <div class="card node">
          <div class="sub-card title">检验单位</div>
          <div class="sub-card content">{{ detailData.CheckUnitCount + '家' }}</div>
        </div>
        <div class="card node">
          <div class="sub-card title">监管机构</div>
          <div class="sub-card content">{{ detailData.JjUnitCount + '家' }}</div>
        </div>
      </div>
    </div>
  </el-card>
</template>

<script>
import Breadcrumb from '../../../../components/QipingBreadCrumb/BreadCrumb.vue'
import * as echarts from 'echarts'
import 'echarts/map/js/china.js'

import Highcharts from 'highcharts/highstock'
import { DataEngineDetailDataSearchArgs, searchDataEngineDetailData } from '../../../../api/qiping/data-engine'
export default {
  data() {
    return {
      // 导航树相关数据
      naviBasicItems: [{ text: '气瓶' }, { text: '数据引擎', to: '/qiping/dataEngine' }],
      naviItems: [],

      // 图表相关数据
      gasGeoChart: null,
      gasTypeInfoChart: null,
      gasUseYearsInfoChart: null,
      gasRecordInfoChart: null,

      // 数据引擎页面数据
      detailDataSearchArgs: new DataEngineDetailDataSearchArgs(),
      detailData: {
        DataSize: 0, // 上云数据总大小（单位MB）
        RegInfoDataSize: 0, // 使用登记数据大小
        RegInfoDataCount: 0, // 使用登记数据条数
        CheckInfoDataSize: 0, // 定检数据
        CheckInfoDataCount: 0, // 定检数据条数
        RecordInfoDataSize: 0, // 充装数据
        RecordInfoDataCount: 0, // 充装数据条数
        GasCount: 0, // 入网气瓶总数
        DistrictInfo: [], // 入网气瓶区域分布统计
        GasTypeInfo: [], // 气瓶类型分布统计
        UseYearsInfo: [], // 使用年数分布统计
        GasRecordInfo: [], //充装次数分布统计
        UnitCount: 0, // 服务单位总数
        SydwRecordUnitCount: 0, // 使用单位/充装单位数量
        MakeUnitCount: 0, // 制造单位数量
        CheckUnitCount: 0, // 定检单位数量
        JjUnitCount: 0, // 监管机构数量
      },
    }
  },
  async created() {
    // 初始化导航树
    this.naviItems = [...this.naviBasicItems]
    await this.searchDetailData()
  },
  components: {
    Breadcrumb,
  },
  methods: {
    // 获取页面需要的数据
    async searchDetailData() {
      const res = await searchDataEngineDetailData(this.detailDataSearchArgs)
      this.detailData = res.data
      // 设置各个图表
      //  await this.setGeoChart([{ name: '重庆', value: 455449}])
      await this.setGeoChart(this.detailData.DistrictInfo)
      await this.setGasTypeChart(this.detailData.GasTypeInfo)
      await this.setGasUseYearsChart(this.detailData.UseYearsInfo)
      await this.setRecordChart(this.detailData.GasRecordInfo)
    },
    // 设置地图
    async setGeoChart(data) {
      const yData = []
      // const barData = []
      // for (var i = 0; i < data.length; i++) {
      //   // barData.push(data[i])
      //   // yData.push(i + data[i].name)
      // }
      const option = {
        title: [
          {
            show: true,
            text: '区域分布',
            textStyle: {
              color: '#2D3E53',
              fontSize: 18,
            },
            right: 300,
            top: 50,
          },
        ],
        tooltip: {
          show: true,
          formatter: function (params) {
            if (!params.data) return
            return params.name + '：' + params.data['value'] + '台'
          },
        },
        visualMap: {
          show: true,
          type: 'continuous',
          orient: 'horizontal',
          itemWidth: 10,
          itemHeight: 80,

          showLabel: true,
          seriesIndex: [0],
          min: 0,
          max: 2000000,
          inRange: {
            color: ['#6FCF6A', '#FFFD64', '#FF5000'],
          },
          textStyle: {
            color: '#7B93A7',
          },
          bottom: 30,
          left: 'left',
        },
        grid: {
          right: 10,
          top: 135,
          bottom: 100,
          width: '20%',
        },
        xAxis: {
          show: false,
        },
        yAxis: {
          type: 'category',
          inverse: true,
          nameGap: 16,
          axisLine: {
            show: false,
            lineStyle: {
              color: '#ddd',
            },
          },
          axisTick: {
            show: false,
            lineStyle: {
              color: '#ddd',
            },
          },
          axisLabel: {
            interval: 0,
            margin: 85,
            textStyle: {
              color: '#455A74',
              align: 'left',
              fontSize: 14,
            },
            rich: {
              a: {
                color: '#fff',
                backgroundColor: '#FAAA39',
                width: 20,
                height: 20,
                align: 'center',
                borderRadius: 2,
              },
              b: {
                color: '#fff',
                backgroundColor: '#4197FD',
                width: 20,
                height: 20,
                align: 'center',
                borderRadius: 2,
              },
            },
            formatter: function (params) {
              if (parseInt(params.slice(0, 1)) < 3) {
                return ['{a|' + (parseInt(params.slice(0, 1)) + 1) + '}' + '  ' + params.slice(1)].join('\n')
              } else {
                return ['{b|' + (parseInt(params.slice(0, 1)) + 1) + '}' + '  ' + params.slice(1)].join('\n')
              }
            },
          },
          data: yData,
        },
        geo: {
          // roam: true,
          map: 'china',
          left: 'left',
          right: '0',
          // layoutSize: '80%',
          label: {
            emphasis: {
              show: false,
            },
          },
          itemStyle: {
            emphasis: {
              areaColor: '#fff464',
            },
          },
        },
        series: [
          {
            name: 'mapSer',
            type: 'map',
            roam: false,
            geoIndex: 0,
            label: {
              show: false,
            },
            data: data,
          },
          // {
          //   name: 'barSer',
          //   type: 'bar',
          //   roam: false,
          //   visualMap: false,
          //   zlevel: 2,
          //   barMaxWidth: 8,
          //   barGap: 0,
          //   itemStyle: {
          //     normal: {
          //       color: function (params) {
          //         // build a color map as your need.
          //         const colorList = [
          //           {
          //             colorStops: [
          //               {
          //                 offset: 0,
          //                 color: '#FFD119', // 0% 处的颜色
          //               },
          //               {
          //                 offset: 1,
          //                 color: '#FFAC4C', // 100% 处的颜色
          //               },
          //             ],
          //           },
          //           {
          //             colorStops: [
          //               {
          //                 offset: 0,
          //                 color: '#00C0FA', // 0% 处的颜色
          //               },
          //               {
          //                 offset: 1,
          //                 color: '#2F95FA', // 100% 处的颜色
          //               },
          //             ],
          //           },
          //         ]
          //         if (params.dataIndex < 3) {
          //           return colorList[0]
          //         } else {
          //           return colorList[1]
          //         }
          //       },
          //       barBorderRadius: 15,
          //     },
          //   },
          //   data: barData,
          // },
        ],
      }
      setTimeout(() => {
        this.gasGeoChart = echarts.init(document.getElementById('geo-graph'))
        this.gasGeoChart.setOption(option)
      }, 0)
    },
    // 设置气瓶类型图表
    async setGasTypeChart(gasTypeData) {
      const gasTypeChartOption = {
        chart: {
          plotBackgroundColor: null,
          plotBorderWidth: null,
          plotShadow: false,
          type: 'pie',
        },
        title: {
          text: '气瓶类型',
        },
        tooltip: {
          pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>',
        },
        plotOptions: {
          pie: {
            allowPointSelect: true,
            cursor: 'pointer',
            dataLabels: {
              enabled: false,
            },
            showInLegend: true,
          },
        },
        series: [
          {
            name: '气瓶类型',
            colorByPoint: true,
            data: [...gasTypeData],
          },
        ],
      }
      setTimeout(() => {
        this.gasTypeInfoChart = new Highcharts.chart('gas-type', gasTypeChartOption)
      }, 0)
    },
    // 设置气瓶使用年限图表
    async setGasUseYearsChart(gasUseYearsData) {
      const gasUseYearsChartOption = {
        chart: {
          plotBackgroundColor: null,
          plotBorderWidth: null,
          plotShadow: false,
          type: 'pie',
        },
        title: {
          text: '使用年限',
        },
        tooltip: {
          pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>',
        },
        plotOptions: {
          pie: {
            allowPointSelect: true,
            cursor: 'pointer',
            dataLabels: {
              enabled: false,
            },
            showInLegend: true,
          },
        },
        series: [
          {
            name: '使用年限',
            colorByPoint: true,
            data: [...gasUseYearsData],
          },
        ],
      }
      setTimeout(() => {
        this.gasUseYearsInfoChart = new Highcharts.chart('gas-use-years', gasUseYearsChartOption)
      }, 0)
    },

    // 设置气瓶充装图表
    async setRecordChart(recordData) {
      const recordChartOption = {
        chart: {
          type: 'column',
        },
        title: {
          text: '充装次数',
        },
        subtitle: {},
        xAxis: {
          type: 'category',
          labels: {
            rotation: 0, // 设置轴标签旋转角度
          },
          title: {
            text: '充装次数',
          },
        },
        yAxis: {
          min: 0,
          title: {
            text: '气瓶数',
          },
        },
        legend: {
          enabled: false,
        },
        series: [
          {
            name: '气瓶数',
            data: [...recordData],
          },
        ],
      }
      setTimeout(() => {
        this.gasRecordInfoChart = new Highcharts.chart('gas-record', recordChartOption)
      }, 0)
    },
  },
}
</script>

<style lang="less" scoped>
div.container {
  display: flex;
  flex-direction: column;
  font-size: 18px;
  font-weight: 500;
  div.data {
    display: flex;
    flex-direction: row;
    div.card {
      margin: 10px;
    }
    div.card.head {
      background-color: #9dc3e6;
      flex-grow: 2;
      min-width: 250px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      padding: 10px;
      div {
        padding: 5px;
      }
    }
    div.card.node {
      flex-grow: 4;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: flex-start;
      align-items: stretch;
      div.sub-card {
        background-color: #d9d9d9;
        text-align: center;
        line-height: 300%;
      }
      div.sub-card.title {
        width: 100%;
        flex-grow: 2;
        border-bottom: 4px solid white;
        border-left: 2px solid white;
        border-right: 2px solid white;
      }
      div.sub-card.content {
        // width: 49.5%;
        flex-grow: 1;
        border-left: 2px solid white;
        border-right: 2px solid white;
      }
    }
  }
  div.gas {
    display: flex;
    flex-direction: row;
    div.card {
      background-color: #d9d9d9;
      margin: 10px;
    }
    div.card.head {
      background-color: #a9d18e;
      flex-grow: 2;
      min-width: 250px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      padding: 10px;
      div {
        padding: 5px;
      }
    }
    div.charts {
      flex-grow: 12;
      display: flex;
      flex-direction: row;
      div.other-charts {
        min-width: 800px;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        div#geo-graph{
        }
        div.chart {
          position: relative;
        }
        div.gas-type {
        }
        div.gas-use-years {
        }
        div.gas-record {
        }
      }
    }
  }
  div.unit {
    display: flex;
    flex-direction: row;
    div.card {
      margin: 10px;
    }
    div.card.head {
      background-color: #f4b183;
      flex-grow: 2;
      min-width: 250px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      padding: 10px;
      div {
        padding: 5px;
      }
    }
    div.card.node {
      flex-grow: 3;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: flex-start;
      align-items: stretch;
      div.sub-card {
        background-color: #d9d9d9;
        text-align: center;
        line-height: 300%;
      }
      div.sub-card.title {
        width: 100%;
        border-bottom: 4px solid white;
        border-left: 2px solid white;
        border-right: 2px solid white;
      }
      div.sub-card.content {
        width: 100%;
        border-left: 2px solid white;
        border-right: 2px solid white;
      }
    }
  }
}
</style>